<template>
  <div class="app-container">
    <div class="title">
      <div class="left"><span class="circle"></span>质量验收</div>
      <div class="right">
        <el-button size="small" @click="handelSaveFn()">提交</el-button>
      </div>

    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <div class="page-form-item page-form-item2">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">项目名称</span>
        </label>
        <div class="page-form-item-content">
          {{projectName}}
        </div>
      </div>

      <div class="page-form-item page-form-item2">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同名称</span>
        </label>
        <div class="page-form-item-content">
          {{contractTitle}}
        </div>
      </div>

    </div>
    <div style="text-align:right;padding-right:15px">
    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <el-table
        :data="topData.contractQualityLogList"
        border
        style="width: 100%">
        <el-table-column label="是否验收" align="center" width="80" >
          <template slot-scope="scope">
            <el-checkbox :true-label='1' :false-label='0' v-model="scope.row.flag"></el-checkbox>
          </template>
        </el-table-column>

        <el-table-column label="单体编号/名称">
          <template slot-scope="scope">
            {{scope.row.nodeName}}
          </template>
        </el-table-column>

        <el-table-column label="改造事项">
          <template slot-scope="scope">
            {{scope.row.shwoRemark}}
          </template>
        </el-table-column>

        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input size="small" maxlength="250" v-model="scope.row.remark" placeholder="请输入完成情况"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="验收资料">
          <template slot-scope="scope">
            <FileUpload v-model='scope.row.fileList' :limit="3" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { addFarmInfo,updateFarmInfo,getQualityList,getOrgList,getFeedbackInfo,updateRetunFile,getProgressList} from "@/api/progressManagement/quality";
import { roleOption } from "@/api/auth/role";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/auth/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseIndex from '@/views/base/BaseIndex'
import FileUpload from '@/views/components/fileUpload/index.vue'
import { newWindowBpm } from "@/utils/openBpm";
import loadingSearchFormCompany from '@/views/components/loadingSearchFormCompany/index.vue'
import loadingSearchFormPerson from '@/views/components/loadingSearchFormPerson/index.vue'
export default {
  name: "proQuality",
  components: { Treeselect , FileUpload ,loadingSearchFormCompany,loadingSearchFormPerson },
  extends: BaseIndex,
  data() {
    return {
      newWindowBpm,
      pageType:'',

      isDisabled:false,
      contractId:'', // 合同Id
      tableData:[],
      topData:{
        contractQualityLogList:[],
      },
      projectName:'',
      contractTitle:'',
      orgList:[],//厂区下拉
    };
  },
  watch: {

  },
  created() {

    this.pageType = this.$route.query.type
    this.projectName = this.$route.query.projectName
    this.contractTitle = this.$route.query.contractTitle
    if(this.$route.query.type == 'add'){

    }

    getQualityList(this.$route.query.id).then(
      response => {
        if(response && response.code ===0){
          for (let index = 0; index < response.data.length; index++) {
            response.data[index]['fileList'] = []
          }

          for (let index = 0; index < response.data.length; index++) {
            response.data[index]['shwoRemark'] = response.data[index].remark
            response.data[index].remark = response.data[index].qualityRemark

          }
          this.topData.contractQualityLogList = response.data
        }else{
          this.msgError(response.msg)
        }
        this.loading = false;
      }
    );

    getOrgList(this.$route.query.id).then(
      response => {
        if(response && response.code ===0){
          this.orgList = response.data
        }else{
          this.msgError(response.msg)
        }
        this.loading = false;
      }
    );

  },
  methods: {
    handelSaveFn(e){

      for (let index = 0; index < this.topData.contractQualityLogList.length; index++) {
        let elemt = this.topData.contractQualityLogList[index];
        if (elemt.flag == '1') {
          if(!elemt.remark) {this.msgError('备注 完成情况'); return false;}
          if(!elemt.fileList.length) {this.msgError('验收资料 现场照片必传'); return false;}
        }
      }

      for (let index = 0; index < this.topData.contractQualityLogList.length; index++) {
        this.topData.contractQualityLogList[index]['nodeId'] = this.topData.contractQualityLogList[index].id
      }

      var para = {
        ...this.topData,
        progressId: this.$route.query.id,
        status:'1'
      }

      updateFarmInfo(para).then(
        response => {
          if(response && response.code ===0){
            this.msgSuccess("成功");
            newWindowBpm(response.data.instId)
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      );

    },
    handelFeed(){
      this.$router.push({path: "proFeedback", query: {
      }});
    },

  }
};
</script>
<style scoped  lang="scss">
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 0.9375rem 0.9375rem 0.9375rem;
  // padding: 0 0.9375rem 0 0.9375rem;
  background-color: white;
  // border-bottom: 2px solid #ccc ;
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #4A75D0;
    margin-right: 10px;
  }
}

.context-warp {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  margin: 15px;
  border-bottom: 1px solid #ebeef3;
  border-right: 1px solid #ebeef3;
  background-color: white;

  .page-form-item {
    width: 33.3%;
    font-size: 14px;
    font-family: "PingFangSC";
    position: relative;
    border-top: 1px solid #ebeef3;
    vertical-align: top;
    height: 66px;
    color: #4d4d4d;
    display: flex;

    .page-form-item-label {
      width: 120px;
      height: 100%;

      .icon {
        color: red;
      }
    }

    .left-border {
      position: absolute;
      height: 100%;
      width: 1px;
      left: 0;
      top: 0;
      background-color: #ebeef3;
      z-index: 999;
    }

    &-label {
      display: inline-block;
      height: calc(100% - 16px);
      background-color: #f9fafd;
      border-right: 1px solid #ebeef3;
      border-left: 1px solid #ebeef3;
      text-align: center;

      .require {
        display: inline-block;
        width: 8px;
        color: #f56c6c;
        vertical-align: -3px;
      }

      &__text {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.3em;
        width: 80%;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    }

    .border-right0 {
      border-right: 0;
    }

    &-content {
      display: inline-block;
      vertical-align: top;
      padding: 8px;
      height: calc(100% - 16px);

      &.noLabel {
        border-left: 1px solid #ebeef3;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      &.align-top {
        &::after {
          content: "";
          vertical-align: top;
        }
      }

      &.noPadding {
        padding: 0;
      }
    }

    .el-table th {
      background-color: #f9fafd;
    }

    .el-radio {
      margin-right: 15px;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-input--small .el-input__inner {
      font-size: 12px;
    }

    .el-checkbox {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
      vertical-align: -2px;
    }

    .el-select {
      width: 100%;
    }

    .el-cascader {
      width: 100%;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }

    .el-textarea__inner {
      height: 80px;
    }
    .page-form-item-content {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      .text-box {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
      }

      .slider-box {
        display: flex;
        justify-content: space-between;

        &:first-child {
          flex: 1;
        }
      }
    }
  }

  .page-form-item2{
    width: 50%;
  }
  .page-form-item3{
    width: 100%;
  }
  .page-form-item4{
    width: 25%;
  }
}
</style>
